<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        window.onload = function() {

            // 获取父节点，并为它绑定click单击事件。 false 表示事件在冒泡阶段触发（默认）
            document.getElementById('parent-list').addEventListener('click', function(event) {
                event = event || window.event;

                // e.target 表示：触发事件的对象
                //如果触发事件的对象是我们期望的元素，则执行否则不执行
                if (event.target && event.target.className == 'link') {
                    // 或者写成 if (event.target && event.target.nodeName.toUpperCase() == 'A') {
                    console.log('我是ul的单击响应函数');
                }
            }, false);
        };
    </script>
</head>

<body>
    <ul id="parent-list" style="background-color: #bfa;">
        <li>
            <p>我是p元素</p>
        </li>
        <li><a href="javascript:;" class="link">超链接一</a></li>
        <li><a href="javascript:;" class="link">超链接二</a></li>
        <li><a href="javascript:;" class="link">超链接三</a></li>
    </ul>
</body>

</html>